<!--  -->
<template>
    <div class=''>
        <el-form ref="form" :inline="true" :model="formInline" class="form-inline" label-width="80px"
            @submit.native.prevent>
            <slot></slot>

            <el-form-item class="btnItem">
                <el-tooltip class="item" effect="dark" content="导出数据之前需要先选择审核时间" placement="bottom">
                    <el-button v-if="exportBtn" @click="exportHandler">导出</el-button>
                </el-tooltip>
                <el-button @click="$emit('resetTable')">重置</el-button>
                <el-button class="btn" type="primary" @click="$emit('onSubmit', formInline)"
                    native-type="submit">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    props: {
        formInline: Object,
        exportBtn: {
            type: Boolean,
            default: false,
        }
    },
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {

        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        exportHandler() {
            this.$emit('exportHandler');
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

::v-deep .form-inline {
    display: flex;
    flex-wrap: wrap;

    .btnItem {
        flex: 1;
        display: flex;
        justify-content: flex-end;

        .el-form-item__content {
            width: auto !important;
        }

        .btn {
            margin-right: 22px;
        }
    }

    .el-form-item__label {
        // min-width: 80%;
        overflow: hidden;
        white-space: nowrap;
    }

    .el-date-editor--daterange {
        width: 100%;

        .el-range-separator {
            width: 10% !important;
        }
    }

    .el-input,
    .el-select {
        width: 100%;
    }

    .el-form-item {
        display: flex;
        width: 20%;
        margin-right: 0;

        .el-form-item__content {
            width: 70%;
        }
    }
}

::v-deep .el-range-separator {
    padding: 0;
}
</style>